import React from "react";
import styles from "./index.module.scss";
import img1 from "@/assets/home-images/1.png";
import img2 from "@/assets/home-images/2.png";
import img3 from "@/assets/home-images/3.png";
import img4 from "@/assets/home-images/4.png";
import header from "@/assets/home-images/header.png";
import modeImg1 from "@/assets/home-images/modebackgroud1.png";
import modeImg2 from "@/assets/home-images/modebackgroud2.png";
import modeImg3 from "@/assets/home-images/modebackgroud3.png";
import modeImg4 from "@/assets/home-images/modebackgroud4.png";
import { useNavigate } from "react-router-dom";
import { useEffect } from "react";

const Index = () => {
  const navigate = useNavigate();
  const gotoPractice = (number) => {
    number === 0 ? navigate("/practice") : "";
  };

  const list = [
    {
      text: "10/100",
      title: "练习模式",
      img: modeImg1,
    },
    {
      text: "闯关倔强青铜",
      title: "闯关模式",
      img: modeImg2,
    },
    {
      text: "PK 荣耀黄金",
      title: "练习模式",
      img: modeImg3,
    },
    {
      text: "设计师尊贵铂金",
      title: "设计师模式",
      img: modeImg4,
    },
  ];
  return (
    <div className={styles.appContent}>
      <div className={styles.headerContent}>
        <div className={styles.headerPiceture}>
          <img alt="加载失败" src={header} />
        </div>
        <div className={styles.text}>
          <span>一拳超人</span>
        </div>
      </div>
      <div className={styles.centerContent}>
        {list.map((item: any, index: number) => {
          return (
            <div className={styles.mode} key={index}>
              <div className={styles.top}>
                <img src={item.img} alt="加载失败" />
                <div className={styles.bottomText}>{item.text}</div>
              </div>
              <div
                className={styles.bottom}
                onClick={() => {
                  gotoPractice(index);
                }}
              >
                <span>{item.title}</span>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default Index;
